<template>
  <!-- 邀请加入圈子页面 -->
  <view class="main">
    <view class="top">
      <view @tap="toSearch">
        <view class="top_s">
          <view class="left">
            <icon type="search" size="13" />
          </view>
          <view class="right"> 搜索成员 </view>
        </view>
      </view>
    </view>
    <!-- tab栏切换 -->
    <scroll-view scroll-x="true" style="background-color: #fff">
      <view class="tabs">
        <view
          :class="[activeIndex == index ? 'item active' : 'item']"
          v-for="(item, index) in array"
          :key="index"
          @click="handleTab(index)"
        >
          {{ item.orgName }}
          <text class="xian"></text>
        </view>
      </view>
    </scroll-view>
    <!-- 无成员展示 -->
    <view class="wu_Huo" v-if="renList.length == 0">
      <image src="../../imges/zwcy.png" mode="aspectFill"></image>
      <text>暂无成员</text>
    </view>
    <!-- 全换操作 -->
    <view class="quanxuan" v-if="renList.length > 0">
      <view></view>
      <view class="right">
        <image
          src="../../imges/weixuan.png"
          mode="aspectFill"
          v-if="!is_allChoose"
          @tap="handleNoAll"
        ></image>
        <image
          src="../../imges/yixuan.png"
          mode="aspectFill"
          v-if="is_allChoose"
          class="choose"
          @tap="handleAll"
        ></image>
        <text>全选</text>
      </view>
    </view>

    <view
      class="list_"
      v-for="(item, index) in renList"
      :key="index"
      @tap="handleChoose(item.isInvite, index)"
    >
      <view class="item">
        <view class="left">
          <image :src="item.avatarUrl" mode=""></image>
          <text class="name">{{ item.realName }}</text>
          <text class="des">{{ item.company }}</text>
        </view>
        <view class="right">
          <image
            src="../../imges/weixuan.png"
            mode="aspectFill"
            v-if="!item.is_choose"
          ></image>
          <image
            src="../../imges/yixuan.png"
            mode="aspectFill"
            v-if="item.is_choose"
            class="choose"
          ></image>
        </view>
        <!-- <view class="right" v-if="item.isInvite == 0">
          <image
            src="../../imges/weixuan.png"
            mode="aspectFill"
            v-if="!item.is_choose"
          ></image>
          <image
            src="../../imges/yixuan.png"
            mode="aspectFill"
            v-if="item.is_choose"
            class="choose"
          ></image>
        </view>
        <view class="right1" v-if="item.isInvite == 1"> 邀请过 </view> -->
      </view>
    </view>

    <view class="btn_bottom">
      <view class="btn" @tap="handleSend">
        发出邀请（{{ allList.length + renChooseList.length }}人）
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      activeIndex: 0,
      array: [],
      id: "",
      orgId: "",
      createName: "",
      renList: [], //好友列表
      is_choose: false,
      renChooseList: [], //选中数组
      is_allChoose: false,
      allList: [],
      idArry: [],
      type: "",
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.quanziAll();
    // this.memberList()
    if (option.type) {
      this.type = option.type;
    }
  },
  updated() {
    // this.orgId = this.array[this.activeIndex].orgId
    // this.createName = this.array[this.activeIndex].createName
  },
  methods: {
    toSearch() {
      if (this.type == 1) {
        uni.navigateTo({
          url:
            "/pages/my_circle/inviterSearch?id=" +
            this.id +
            "&type=" +
            this.type,
        });
      } else {
        uni.reLaunch({
          url:
            "/pages/my_circle/inviterSearch?id=" +
            this.id +
            "&type=" +
            this.type,
        });
      }
    },
    // 加载我的圈子列表
    quanziAll() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/myJoinCircle",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            type: 0,
            pageSize: 23,
            pageNumber: 1,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.array = res.data.data.rows;
            that.orgId = res.data.data.rows[that.activeIndex].orgId;
            console.log(res.data.data.rows[that.activeIndex].orgId);
            that.memberList();
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    // 成员列表
    memberList() {
      this.renList = [];
      this.is_allChoose = false;
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/friends/inviteJoin",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            // "orgId": this.orgId,
            // "pageSize":10,
            // "pageNumber":1,
            // "name": this.createName
            pageNumber: 1,
            pageSize: 10,
            friendsId: this.id,
            id: this.orgId,
            type: 3,
            smallType: 2,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            res.data.data.rows.map((item, index) => {
              that.renList.push(Object.assign(item, { is_choose: false }));
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleTab(index) {
      //切换tab
      this.activeIndex = index;
      this.orgId = this.array[index].orgId;
      this.allList.push.apply(this.allList, this.renChooseList);
      this.renChooseList = [];
      // this.allList.push.apply(this.allList,this.renChooseList);
      this.memberList();
      console.log(this.allList, this.renChooseList);
    },
    handleChoose(isInvite, index) {
      //点击列表选择
      // if (isInvite == 0) {
      this.renChooseList = [];
      if (this.renList[index].is_choose == false) {
        this.is_choose = false;
      }
      if (this.renList[index].is_choose == true) {
        this.is_choose = true;
      }

      this.renList[index].is_choose = !this.is_choose;
      this.is_choose = !this.is_choose;

      this.renChooseList = this.renList.filter((v) => {
        //选中数组
        return v.is_choose == true;
      });
      //判断全部选中
      if (this.renList.length == this.renChooseList.length) {
        this.is_allChoose = true;
      } else {
        this.is_allChoose = false;
      }
      // this.allList.push.apply(this.allList,this.renChooseList);
      console.log(this.renList, this.renChooseList, this.allList, "点击列表");
      // }
    },
    handleSend() {
      //发送邀请
      let list = [];
      // this.allList.push.apply(this.allList,this.renChooseList)
      list = [...this.allList, ...this.renChooseList];
      console.log(list, "发送邀请");
      for (var i = 0; i < list.length; i++) {
        this.idArry.push(list[i].uid);
      }
      console.log(this.idArry);
      if (this.idArry.length == 0) {
        uni.showToast({
          title: "请先选择要发送的同事！",
          duration: 2000,
          icon: "none",
        });
        return false;
      } else {
        let token = uni.getStorageSync("token");
        const that = this;
        // console.log(token, 'token')
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/orgMessage/shareGenerateSocialMessage",
            // url: "app/friends/saveInvite",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              // friendsId: this.id,
              // list: this.idArry,
              socialMessage: {
                msgType: 8007,
                relationId: this.id,
                businessType: 12,
              },
              userList: this.idArry,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              uni.showToast({
                title: "邀请成功",
                duration: 2000,
                icon: "none",
              });
              console.log(that.idArry);
              if (that.type == 1) {
                setTimeout(function () {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1500);
              } else {
                setTimeout(function () {
                  uni.reLaunch({
                    url: "/pages/index/detail?id=" + that.id + "&type=1",
                  });
                }, 1500);
              }
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    handleNoAll() {
      //点击全未选中
      this.is_allChoose = true;
      this.renList.forEach((v) => {
        v.is_choose = true;
      });
      this.renChooseList = this.renList.filter((v) => {
        // return v.is_choose == true && v.isInvite == 0;
        return v.is_choose == true;
      });
      // this.allList.push.apply(this.allList,this.renChooseList);
      // this.renChooseList = []
      console.log(this.renChooseList, "点击全未选中");
    },
    handleAll() {
      //点击全选中
      this.renChooseList = [];
      this.is_allChoose = false;
      this.renList.forEach((v) => {
        v.is_choose = false;
      });
      this.renChooseList = this.renList.filter((v) => {
        return v.is_choose == true;
      });
      console.log(this.renChooseList, "点击全选中");
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}
.wu_Huo {
  margin-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 600rpx;
    height: 420rpx;
  }

  text {
    display: inline-block;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
    position: relative;
    top: -110rpx;
  }
}
.main {
  padding-bottom: 120rpx;
  > .top {
    background-color: #fff;
    padding: 26rpx 32rpx;
    border-top: 2rpx solid #eee;
  }

  .top_s {
    width: 100%;
    height: 70rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2prx 30rpx 0px rgba(0, 0, 0, 0.06);
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #0000000f;
    padding: 0 22rpx;
    box-sizing: border-box;
    box-shadow: 0px 2rpx 30rpx 0px rgba(0, 0, 0, 0.06);

    .left {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 6rpx;
    }

    .right {
      flex: 1;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
      padding-left: 5rpx;
      box-sizing: border-box;
    }

    .end {
      height: 100%;
      display: flex;
      align-items: center;
      width: 50rpx;
      justify-content: center;
    }
  }

  .tabs {
    min-width: 100%;
    max-width: 3000rpx;
    background-color: #fff;
    padding: 20rpx 32rpx;
    // padding-top: 20rpx;
    display: flex;
    white-space: nowrap; // 滚动必须加的属性

    .item {
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 42rpx;
      padding: 0 20rpx;
    }

    .active {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 45rpx;

      text {
        display: block;
        width: 36rpx;
        height: 6rpx;
        background: rgba(33, 104, 235, 1);
        border-radius: 3rpx;
        margin: 0 auto;
      }
    }
  }

  .quanxuan {
    padding: 18rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right {
      // display: flex;
      // align-items: center;

      image {
        width: 28rpx;
        height: 28rpx;
      }

      .choose {
        width: 38rpx;
        height: 38rpx;
        display: inline-block;
        margin-bottom: -6rpx;
        margin-right: -6rpx;
        // display: inline-block;
        // margin-top: -2rpx;
      }

      text {
        position: relative;
        top: -5rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 15rpx;
      }
    }
  }

  .list_ {
    background-color: #fff;
    padding: 0 32rpx;

    .item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      height: 66rpx;
      align-items: center;
      border-bottom: 2rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .left {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        padding-right: 20rpx;
        image {
          vertical-align: top;
          height: 66rpx;
          width: 66rpx;
          border-radius: 50%;
        }

        .name {
          display: inline-block;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          margin-left: 15rpx;
          margin-top: 12rpx;
        }

        .des {
          margin-left: 15rpx;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
      }

      .right {
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
        }

        .choose {
          width: 120%;
          height: 120%;
        }
      }

      .right1 {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(33, 104, 235, 1);
      }
    }
  }

  .btn_bottom {
    border-top: 2rpx solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 100rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .btn {
      width: 686rpx;
      height: 74rpx;
      background: rgba(33, 104, 235, 1);
      border-radius: 46rpx;
      margin: 0 auto;
      line-height: 74rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
